<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打飞机</title>
<style>
	*{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
	}
	#div1{width:800px;height:600px;overflow:hidden;background:#000000;margin:20px auto;position:relative;}
	#gameBtn{color:white;font-size:20px;cursor:pointer;border:1px solid #ffffff;width:100px;height:30px;line-height:30px;text-align:center;position:absolute;top:285px;left:350px;}
	#score{color:#ffffff;font-size:20px;}
	#bee{position:relative}
	.enemy1{width:40px;height:28px;background:url(images/1.png) no-repeat center;float:left}
	.enemy2{width:40px;height:28px;background:url(images/2.png) no-repeat center;float:left}
	.enemy3{width:40px;height:28px;background:url(images/3.png) no-repeat center;float:left}
	.air1{width:46px;height:60px;background:url(images/fj.png) no-repeat center;position:absolute;}
	.bullet{width:1px;overflow:hidden;height:10px;background:#ffffff;position:absolute}
</style>
</head>
<body>
	<div id="div1">
    	<div id="gameBtn">开始游戏</div>
    </div>
</body>
<script>
	window.onload=function(){
		var obtn=document.getElementById("gameBtn");
		obtn.onclick=function(){
			this.style.display="none";
			game.init("div1");
		}
	}
	var djg=0;
	var game={
		oEnemy:{
			e1:{style:'enemy1',hp:1,speed:5,score:1},
			e2:{style:'enemy2',hp:2,speed:7,score:2},
			e3:{style:'enemy3',hp:3,speed:10,score:3},
		},
		gks:[/*关卡的集合*/
			{
				eMap:['e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'],	
				colNum:10,
				iSpeedX:10,
				iSpeedY:10,
				times:2000
				
			},
			{
				eMap:['e3','e3','e3','e3','e3','e3','e3','e3','e3','e3','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e2','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'],	
				colNum:10,
				iSpeedX:10,
				iSpeedY:10,
				times:2000
				
			}
		],
		air:{
				airStyle:'air1',
				bulletStyle:'bullet'
		},
		init:function(id){ /*初始化*/
			this.oParent=document.getElementById(id);
			this.createScore();
			this.createEnemy(djg);
			this.createAir();
			this.czfj();
		},
		createScore:function(){
			var os=document.createElement("div");
			os.id="score";
			os.innerHTML="积分:<span>0</span>";
			this.oParent.appendChild(os);
			this.osNumber=os.getElementsByTagName("span")[0];
		},
		createEnemy:function(i){/*创建蜜蜂*/
			if(this.oUl){
				clearInterval(this.oUl.timer);
				this.oParent.removeChild(this.oUl);
			}
			document.title="第"+(i+1)+"关"
			var gk=this.gks[i];
			var oUl=document.createElement('ul');
			var arr=[];
			oUl.id="bee";
			oUl.style.width=gk.colNum*40+"px";
			this.oParent.appendChild(oUl);
			oUl.style.left=(this.oParent.offsetWidth-oUl.offsetWidth)/2+"px";
			/*console.log(this.oParent.offsetWidth+","+oUl.offsetWidth);*/
			for(var a=0;a<gk.eMap.length;a++){
				var oli=document.createElement('li');
				oli.className=this.oEnemy[gk.eMap[a]].style;
				oli.hp=this.oEnemy[gk.eMap[a]].hp;
				oli.speed=this.oEnemy[gk.eMap[a]].speed;
				oli.score=this.oEnemy[gk.eMap[a]].score;
				oUl.appendChild(oli);
			}
			this.oUl=oUl;
			this.oli=oUl.getElementsByTagName('li');
			for(a=0;a<this.oli.length;a++){
				arr.push([this.oli[a].offsetLeft,this.oli[a].offsetTop]);
			}
			
			for(a=0;a<this.oli.length;a++){
				this.oli[a].style.position="absolute";
				this.oli[a].style.left=arr[a][0]+"px";
				this.oli[a].style.top=arr[a][1]+"px";
			}
			
			this.moveEnemy(gk);

		},
		oneMove:function(){/*移动的敌人*/
			var nowli=this.oli[Math.floor(Math.random()*this.oli.length)];/*Math.random() 0~1之间的随机数*/
			var This=this;
			nowli.timer=setInterval(function(){
				if(nowli.parentNode.offsetLeft){
				var a=(This.oa.offsetLeft+This.oa.offsetWidth/2)-(nowli.offsetLeft+nowli.parentNode.offsetLeft+nowli.offsetWidth);
				var b=(This.oa.offsetTop+This.oa.offsetHeight/2)-(nowli.offsetTop+nowli.parentNode.offsetTop+nowli.offsetHeight);
				console.log(nowli.parentNode);
				var c=Math.sqrt(a*a+b*b);/*通过勾股定理取得第三条边的长度...然后根据比例取得速度*/
				
				var ISx=nowli.speed*a/c;
				var ISy=nowli.speed*b/c;
				nowli.style.left=nowli.offsetLeft+ISx+"px";
				nowli.style.top=nowli.offsetTop+ISy+"px";
				}
				if(This.pz(This.oa,nowli)){
					alert("GAME OVER");
					window.location.reload();
				}
			},30);
		},
		moveEnemy:function(gk){
			var This=this;
			var L=0;
			var R=This.oParent.offsetWidth-This.oUl.offsetWidth;
			
			This.oUl.timer=setInterval(function(){
				if(This.oUl.offsetLeft>R){
					gk.iSpeedX*=-1;
					This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+"px";/*待定*/
				}else if(This.oUl.offsetLeft<0){
					gk.iSpeedX*=-1;
					This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+"px";
				}
				This.oUl.style.left=This.oUl.offsetLeft+gk.iSpeedX+"px";
			},200);
			
			setInterval(function(){
				This.oneMove();
			},gk.times);
		},
		createAir:function(){/*创建一个div来存放飞机,并且给他一个定位到最下边的位子*/
			var oa=document.createElement("div");
			oa.className=this.air.airStyle;
			this.oParent.appendChild(oa);
			oa.style.left=(this.oParent.offsetWidth-oa.offsetWidth)/2+"px";
			oa.style.top=this.oParent.offsetHeight-oa.offsetHeight+"px";
			this.oa=oa;
			/*创建一个div来存放子弹给子弹定位*/
			
			
		},
		czfj:function(){
			This=this;
			var timer=0;
			var leftorright=0;
			document.onkeydown=function(e){
				var ev=e||window.event;//window.event 这个是为了兼容,id dom;e是原本的w3c dom

				
				//按一下就会自动的一直向一边移动是否需要?待定;如果需要的话要添加按钮弹起的事件;
				if(e.keyCode==37){
					leftorright=1;
				}else if(e.keyCode==39){
					leftorright=2;
				}
				
				if(!timer){
					timer=setInterval(show,30);
				}
				if(ev.keyCode==32){
					This.createBullet();
				}
				/*show();*/
			}
			
			document.onkeyup=function(e){
				var ev=e||window.event;
				if(e.keyCode==37||e.keyCode==39){
					clearInterval(timer);
					timer=null;
					leftorright=0;
				}

			}
			
			function show(){

				if(leftorright==1){
					if(This.oa.offsetLeft>0){
						This.oa.style.left=This.oa.offsetLeft-10+"px";
					}
				}
				else if(leftorright==2)
				{
					if(This.oa.offsetLeft<(This.oParent.offsetWidth-This.oa.offsetWidth)){
						This.oa.style.left=This.oa.offsetLeft+10+"px";
					}
				}
			}
		},
		createBullet:function(){
			/*子弹*/
			var shoot=document.createElement("div");
			shoot.className=this.air.bulletStyle;
			this.oParent.appendChild(shoot);
			shoot.style.left=this.oa.offsetLeft+this.oa.offsetWidth/2+"px";
			shoot.style.top=this.oa.offsetTop-10+"px";
			this.runBullet(shoot);
			
		},
		runBullet:function(shoot){
			This=this;
			shoot.timer=setInterval(function(){
				if(shoot.offsetTop<-10){
					clearInterval(shoot.timer);
					This.oParent.removeChild(shoot);
				}else{
					shoot.style.top=shoot.offsetTop-10+"px";
				}
				for(var i=0;i<This.oli.length;i++){
					if(This.pz(shoot,This.oli[i])){
						if(This.oli[i].hp==1){
							clearInterval(This.oli[i].timer);
							This.osNumber.innerHTML=parseInt(This.osNumber.innerHTML)+This.oli[i].score;
							This.oUl.removeChild(This.oli[i]);
						}else{
							This.oli[i].hp--;
						}
						clearInterval(shoot.timer);
						This.oParent.removeChild(shoot);
					}
				}
				if(!This.oli.length){
					djg++;
					if(djg<2){
						This.createEnemy(djg);	
					}else{
						alert("恭喜你已经通关了!");
						window.location.reload();
					}
				}				
				},30);
		},
		pz:function(obj1,obj2){
			
			var L1=obj1.offsetLeft;/*物体左边距离父级左边的距离*/
			var R1=obj1.offsetLeft+obj1.offsetWidth;/*物体右边距离父级右边的距离*/
			var T1=obj1.offsetTop;/*物体的顶部距离父级顶部的距离*/
			var B1=obj1.offsetTop+obj1.offsetHeight;/*物体的底部距离父级顶部的距离*/
			
			var L2=obj2.offsetLeft+obj2.parentNode.offsetLeft;/*物体左边距离父级左边的距离*/
			var R2=obj2.offsetLeft+obj2.offsetWidth+obj2.parentNode.offsetLeft;/*物体右边距离父级右边的距离*/
			var T2=obj2.offsetTop+obj2.parentNode.offsetTop;/*物体的顶部距离父级顶部的距离*/
			var B2=obj2.offsetTop+obj2.offsetHeight+obj2.parentNode.offsetTop;/*物体的底部距离父级顶部的距离*/
			
			/*console.log(L2+","+R2+","+T2+","+B2);*/
			if(L1>R2||R1<L2||T1>B2||B1<T2){
				return false;
			}else{
				return true;
			}
		}
	}
</script>
</html>
